"use client";

import { usePathname } from "next/navigation";
import Icon from "../_component/icon";
import { v4 as uuidv4 } from "uuid";

const navigation = [
  { name: "对话", href: "/chat", icon: "chat" },
  { name: "函数调用", href: "/function", icon: "function" },
  { name: "助手", href: "/assistant", icon: "assistant" },
  { name: "split" },
  { name: "模型列表", href: "/modal", icon: "queue" },
  { name: "路由管理", href: "/router", icon: "router" },
  { name: "驱动管理", href: "/driver", icon: "driver" },
  { name: "统计日志", href: "/stat", icon: "stat" },
  { name: "设置", href: "/setting", icon: "setting" },
];

const splitDiv = <div key="split_divide" className="divider" />;

const itemDiv = (item, path) => {
  return (
    <li key={uuidv4()}>
      <a className={path === item.href ? "active" : ""} href={item.href}>
        <Icon name={item.icon} />
        {item.name}
      </a>
    </li>
  );
};

export default function Navbar() {
  const path = usePathname();

  return (
    <div>
      <nav className="flex min-h-screen w-72 flex-col gap-2 overflow-y-auto bg-zinc-100 px-6 py-10">
        <div className="mx-4 flex items-center gap-2 font-black">
          <a href="/" className="text-lg">
            AI Hub
          </a>
        </div>
        <ul className="menu">
          {navigation.map((item) =>
            item.name === "split" ? splitDiv : itemDiv(item, path),
          )}
        </ul>
      </nav>
    </div>
  );
}
